<script setup lang="ts">
import { utilsCopy } from '@/utils'

interface IProps {
	data: any[]
	admin: boolean;
}

const emit = defineEmits(['selectAll'])
const props = withDefaults(defineProps<IProps>(), {});
</script>
<template>
	<template v-for="(item, index) in data" :key="item.menuId">
		<div class="iconWrap">
			<div class="item">
				<div class="label">
					<n-popover trigger="hover" :disabled="item.status === 1">
						<template #trigger>
							<n-checkbox
								v-model:checked="item.checked"
								:disabled="item.disabled || admin || item.status === 1"
								:value="item.menuId"
								:indeterminate="item.indeterminate"
								@update:checked="emit('selectAll',index)"
							>
								{{ item.menuName }} {{ item.visible === 1 ? '(隐藏)' : '' }}
								{{ item.status === 1 ? '(禁用)' : '' }}
							</n-checkbox>
						</template>
						<div>
							点击快捷复制：
							<n-button type="primary" quaternary @click="utilsCopy(`['${item.perms}']`)">{{
									item.perms
								}}
							</n-button>
						</div>
					</n-popover>
				</div>
				<div class="checkList" v-if="item.children">
					<SubCheckListItem
						:data="item.children"
						:admin="admin"
						v-if="item.children.filter((i: any)=>i.children).length"
					/>
					<div class="iconWrap" v-else>
						<n-space>
							<template
								v-for="sub in item.children"
								:key="sub.menuId"
							>
								<n-popover trigger="hover" :disabled="sub.status === 1">
									<template #trigger>
										<n-checkbox
											:disabled="sub.disabled || admin || sub.status === 1"
											:value="sub.menuId"
											v-model:checked="sub.checked"
										>
											{{ sub.menuName }} {{ sub.visible === 1 ? '(隐藏)' : '' }}
											{{ sub.status === 1 ? '(禁用)' : '' }}
										</n-checkbox>
									</template>
									<div>
										点击快捷复制：
										<n-button
											type="primary" quaternary @click="utilsCopy(`['${sub.perms}']`)"
										>{{ sub.perms }}
										</n-button>
									</div>
								</n-popover>
							</template>
						</n-space>
					</div>
				</div>
			</div>
		</div>
		<n-divider v-if="index<data.length-1" class="line"/>
	</template>
</template>
<style lang="less" scoped>
.iconWrap {
	padding: 0 20px;
	display: flex;
	align-items: center;

	&.active,
	&:hover {
		background-color: var(--placeholder-color);
	}

	.iconWrap {
		width: 100%;
		display: flex;
		padding: 20px;
		&.active,
		&:hover {
			background-color: transparent;
		}

		.iconWrap {
			padding: 0;
		}
	}

	:deep(.n-icon) {
		margin-right: 10px;
		padding-top: 3px;
	}

	.checkAll {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 80px;
		flex-shrink: 0;
	}
}

.item {
	flex-grow: 1;
	transition-duration: .2s;
	display: flex;

	.label {
		width: 140px;
		flex-shrink: 0;
		display: flex;
		align-items: center;
	}

	.item {
		.label {
			width: 160px;
		}
	}

	.checkList {
		flex-grow: 1;
		display: flex;
		flex-wrap: wrap;
	}

	.name {
		font-size: 14px;

		&.disabled {
			color: var(--error-color);
		}
	}

	.desc {
		font-size: 12px;
		opacity: .5;
	}
}
</style>
